<template>
	<div class=" login container">
		<header>
			<van-nav-bar title="找回密码" left-arrow @click-left="goBack" />
		</header>
		<section>
			<div class="login-tel">
				<input type="text" v-model="userTel" placeholder="请输入手机号码" pattern="[0-9]*">
			</div>
			<div class='login-code'>
				<input type="text" placeholder="请输入短信验证码" pattern="[0-9]*" v-model='userCode'>
				<button :disabled="disabled" @click='sendCode'>{{ codeMsg }}</button>
			</div>
			<div class="login-btn" @click="next">下一步</div>
		</section>
		<Tabbar></Tabbar>
	</div>
</template>

<script>
import Tabbar from '@/components/common/Tabbar.vue'
import { Toast } from 'vant';
import http from '@/common/api/request.js'
export default {
	data() {
		return {
			disabled: false,
			userTel: '',
			userCode: '',
			//验证规则
			rules: {//手机号验证
				userTel: {
					rule: /^1[23456789]\d{9}$/,
					msg: '手机号不能为空，并且是11位数字'
				}
			},
			codeNum: 6,
			codeMsg: '获取短信验证码',
			code: ''
		}
	},
	components: { Tabbar },
	methods: {
		//点击获取短信验证码按钮
		sendCode() {
			//验证
			if (!this.validate('userTel')) return;

			//请求短信验证码接口
			http.$axios({
				url: '/api/code',
				method: 'POST',
				data: {
					phone: this.userTel
				}
			}).then(res => {
				if (res.success) {
					this.code = res.data;
				}
			})

			//禁用按钮
			this.disabled = true;
			//倒计时
			let timer = setInterval(() => {
				--this.codeNum;
				this.codeMsg = `重新发送 ${this.codeNum}`;
			}, 1000)
			//判断什么时候停止定时器
			setTimeout(() => {
				clearInterval(timer);
				this.codeNum = 6;
				this.disabled = false;
				this.codeMsg = '获取短信验证码';
			}, 6000)

		},
		//验证信息提示
		validate(key) {
			let bool = true;
			if (!this.rules[key].rule.test(this[key])) {
				//提示信息
				Toast(this.rules[key].msg);
				bool = false;
				return false;
			}
			return bool;
		},
		// 下一步
		next() {
			// 如果验证码不正确
			if (!this.code != this.userCode) {
				Toast('验证码不正确');
				return;
			}

			// 查询后端的手机号是否存在
			http.$axios({
				url: 'api/selectUser',
				method: 'POST',
				data: {
					phone: this.userTel
				}
			}).then(res => {
				if (!res.success) {
					Toast(res.msg);
				}
				this.$router.push({
					name: 'btn',
					query: {
						phone: this.userTel
					}
				})
			})
		},
		goBack() {
			this.$router.back()
		}
	}
}   
</script>

<style scoped>
header {
	width: 100%;
	height: 1.473333rem;

}

::v-deep .van-nav-bar__content {
	background-color: #fff;
	height: 58px;
}

::v-deep .van-nav-bar__title {
	color: #1b1b1b;
	font-size: 18px;
}

::v-deep .van-nav-bar .van-icon {
	color: #1b1b1b;
	font-size: 0.593333rem;
}

section {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 0.32rem;
	background-color: #fff;
}


section div {
	margin: 0.266666rem 0;
	width: 8.933333rem;
	/* height: 1.473333rem; */
}

section input {
	box-sizing: border-box;
	padding: 0 0.266666rem;
	line-height: 1.473333rem;
	background-color: #FFFFFF;
	border-bottom: 1px solid #ccc;
	
}

.login-tel {
	margin-top: 0.8rem;
}

.login-tel input {
	width: 8.933333rem;
}

.login-code {
	display: flex;
	margin-top: 0.8rem;
}

.login-code input {
	flex: 1;
}

.login-code button {
	padding: 0 0.533333rem;
	height: 40px;
	color: #fff;
	background-color: #1b1b1b;
	border: 0;
	border-radius: 6px;
	margin-top: 18px;
}

.login-btn {
	line-height: 44px;
	color: #fff;
	font-size: 0.48rem;
	text-align: center;
	background-color: #1b1b1b;
	border-radius: 99px;
	margin-top: 0.8rem
}
</style>